<template>
	<div class="customer" style="padding: 40px 20px 40px 0">
		<div style="width: 85%;background-color: #ffffff;height: 80vh;" class="orderListFont">
			<el-row style="">
				<el-row>
					<el-col :span="24" style="margin-bottom: 20px;padding-top: 10px;">
						<span style="font-size: 18px;margin-left: 10px;">营销工具>会员卡管理</span>
					</el-col>
				</el-row>
				<div style="background-color: #FFFFFF;margin-bottom: 20px;">
					<div style="padding: 0 50px;display: flex;justify-content: space-between;">
						<el-radio-group v-model="tabPosition" @change="changeListCard()">
							<el-radio-button  style="margin-bottom: 0;" label="cardName">会员卡信息</el-radio-button>
							<el-radio-button  style="margin-bottom: 0;" label="cardList">会员卡名单</el-radio-button>
						</el-radio-group>
						<el-button style="margin-left: 50px;" type="primary" @click="addCardEdio()">增加会员卡</el-button>
					</div>
				</div>
				<div style="padding-left: 10px;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline" v-show="tabPosition=='cardName'">
						<el-form-item label="商品名称" label-width="120px">
							<el-input v-model="formInline.voucherName"></el-input>
						</el-form-item>
						<el-form-item label="会员卡状态" label-width="120px">
							<el-select v-model="formInline.voucherStat" style="width: 120px;">
								<el-option label="全部" value=""></el-option>
								<el-option :label="item.text" :value="item.value" v-for="item in vipCardList"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit('find')">查询</el-button>
							<el-button type="primary" @click="onSubmit('update')">重置</el-button>
						</el-form-item>
					</el-form>
					<el-form :inline="true" :model="formInline4" class="demo-form-inline" v-show="tabPosition=='cardList'">
						<el-form-item label="持卡人名称" label-width="120px">
							<el-input v-model="formInline4.userName"></el-input>
						</el-form-item>
						<el-form-item label="手机号" label-width="120px">
							<el-input v-model="formInline4.userPhone"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onFindSubmit('find')">查询</el-button>
							<el-button type="primary" @click="onFindSubmit('update')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div style="padding: 0 10px;">
					<el-table :data="pageInfo.lists" v-loading="tableCard_loading" element-table_loading-text="加载中" stripe v-show="tabPosition=='cardName'"
					 style="width: 100%">
						<el-table-column type="index" width="80" label="序号">
						</el-table-column>
					
						<el-table-column prop="voucherName" label="卡片名称">
						</el-table-column>
						<el-table-column width="160" label="会员卡封面">
							<template scope="scope">
								<img class="avatar" :src="scope.row.voucherCover" style="width: 100px;border-radius: 5px;margin: 5px 0;">
							</template>
						</el-table-column>
						<el-table-column width="160" label="会员卡logo">
							<template scope="scope">
								<img class="avatar" :src="scope.row.logo" style="width: 100px;border-radius: 5px;margin: 5px 0;">
							</template>
						</el-table-column>
						<el-table-column prop="balance" label="卡片面值(元)">
						</el-table-column>
						<el-table-column prop="voucherAmt" label="卡片售价(元)">
						</el-table-column>
						<el-table-column prop="voucherNum" label="库存">
						</el-table-column>
						<el-table-column prop="voucherSunNum" label="销量">
						</el-table-column>
						<el-table-column label="状态">
							<template scope="scope">
								<span>{{vipCardList[scope.row.voucherStat].text}}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="140">
							<template scope="scope">
								<div style="margin: 5px 0;" >
									<div style="display: flex;">
										<el-button type="primary" size="small" @click="showFindCardDiog(scope.row)">查看</el-button>
										<el-button type="primary" size="small" @click="showEditCardDiog(scope.row)">编辑</el-button>
					
									</div>
									<div style="display: flex;margin-top: 10px;">
										<el-button type="danger" size="small" v-if="scope.row.voucherStat==1" @click="handleDelete3(scope.row,'下架')">下架
										</el-button>
										<el-button type="success" size="small" v-else @click="handleDelete3(scope.row,'上架')">上架
										</el-button>
										<el-button type="danger" size="small" @click="handleDelete4(scope.row,'失效')">失效</el-button>
									</div>
								</div>
								<!-- <div v-else style="text-align: center;">
								v-if="scope.row.voucherStat != 2"
									会员卡已失效
								</div> -->
							</template>
						</el-table-column>
					</el-table>
					<div class="paginate" v-show="tabPosition=='cardName'">
						<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
						</el-pagination>
					</div>
					
					<!-- 会员卡名单 -->
					<el-table :data="pageInfo4.dtos" v-loading="tableCard_loading" element-table_loading-text="加载中" stripe v-show="tabPosition=='cardList'"
					 style="width: 100%">
						<el-table-column type="index" width="80" label="序号">
						</el-table-column>
					
						<el-table-column prop="voucherName" label="会员卡名称">
						</el-table-column>
						<el-table-column prop="voucherId" label="会员卡号">
						</el-table-column>
						<el-table-column prop="userName" label="持卡人名称">
						</el-table-column>
						<el-table-column prop="userPhone" label="手机号">
						</el-table-column>
						<el-table-column prop="balance" label="会员卡余额(元)">
						</el-table-column>
						<el-table-column label="操作" width="140">
							<template scope="scope">
								<el-button type="primary" size="small" @click="showPayOrderHistory(scope.row)">消费记录</el-button>
								
							</template>
						</el-table-column>
					</el-table>
					<div class="paginate" v-show="tabPosition=='cardList'">
						<el-pagination @current-change="handleCurrentChangeCard" :current-page="pageInfo4.pageNum" :page-size="pageInfo4.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfo4.count">
						</el-pagination>
					</div>
				</div>
			</el-row>
			<!-- 增加会员卡弹框 -->
			<div class="vipAddCard">
				<el-dialog title="增加会员卡" :visible.sync="addCardDialogVisible" :width="addCardWidth">
					<div style="padding: 20px;">
						<el-form :model="formInlineCard" class="demo-form-inline" label-width="120px">
							<el-form-item label="会员卡名称：">
								<el-input v-model="formInlineCard.voucherName"></el-input>
							</el-form-item>
							<el-form-item label="会员卡图片：">
								<div style="width: 120px;text-align: center;display: inline-block;">
									<p style="margin-bottom: 0;">封面(非必填)</p>
									<div style="display: inline-block;">
										<we-ui-uploads :images="formInlineCard.voucherCover" :maxCount="1" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
									</div>
								</div>
								<div style="width: 120px;text-align: center;display: inline-block;">
									<p style="margin-bottom: 0;">logo(非必填)</p>
									<div style="display: inline-block;">
										<we-ui-uploads :images="formInlineCard.logo" :maxCount="1" :maxSize="1024*1024" @uploading="uploading5"></we-ui-uploads>
									</div>
								</div>
							</el-form-item>
							<el-form-item label="卡片面值：">
								<el-input v-model="formInlineCard.balance"></el-input>
							</el-form-item>
							<el-form-item label="卡片售价：">
								<el-input v-model="formInlineCard.voucherAmt"></el-input>
							</el-form-item>
							<el-form-item label="有效日期：">
								<el-radio v-model="endTime" label="1">长期有效</el-radio>
							</el-form-item>
							<el-form-item label="库存数量：">
								<el-input v-model="formInlineCard.voucherNum"></el-input>
							</el-form-item>
							<el-form-item label="特权说明：">
								<el-input v-model="formInlineCard.voucherRemark" :maxlength="120" type="textarea" :rows="3"></el-input>
							</el-form-item>
							<el-form-item label="使用须知：">
								<el-input v-model="formInlineCard.voucherUseRule" :maxlength="120" type="textarea" :rows="3"></el-input>
							</el-form-item>
							<el-form-item label="是否上架：">
								<el-radio v-model="formInlineCard.voucherStat" label="1">是</el-radio>
								<el-radio v-model="formInlineCard.voucherStat" label="2">否</el-radio>
							</el-form-item>
						</el-form>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addCardDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="addCardSubmit()">确 定</el-button>
					</span>
				</el-dialog>
			</div>

			<!-- 编辑会员卡弹框 -->
			<div class="vipAddCard">
				<el-dialog
				  title="编辑会员卡"
				  :visible.sync="editCardDialogVisible"
				  :before-close="handleClose"
				  :width="widthCard"
				  center="true">
				   <div style="padding: 20px 40px 0 20px;">
					   <el-form  :model="formInlineCard"  class="demo-form-inline" label-width="120px">
									<el-form-item label="卡片售价：">
										<el-input v-model="formInlineCard.voucherAmt" ></el-input>
									</el-form-item>
					   				<el-form-item label="库存数量：">
					   				  <el-input v-model="formInlineCard.voucherNum" ></el-input>
					   				</el-form-item>
					   </el-form>
				   </div>
				  <span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="editCardPrice()">确 定</el-button>
						<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				  </span>
				</el-dialog>
			</div>
			<!-- 查看会员卡弹框 -->
			<div class="vipAddCard">
				<el-dialog
				  title="查看会员卡"
				  :visible.sync="dialogVisible"
				  :before-close="handleClose"
				  :width="widthCard"
				  center="true">
				  <el-tabs v-model="activeCardName" @tab-click="handleClickCard" style="margin-top: 20px;">
				      <el-tab-pane :label="'会员卡信息'" name="1"></el-tab-pane>
				      <el-tab-pane :label="'其他信息'" name="2"></el-tab-pane>
				   </el-tabs>
				   <div style="padding: 0 40px 0 20px;">
					   <el-form  :model="formInlineCard"  class="demo-form-inline" label-width="120px" v-show="activeCardName==1">
									<el-form-item label="会员卡名称：">
										<div>
											{{formInlineCard.voucherName}}
										</div>
									</el-form-item>
					   				<el-form-item label="会员卡封面：">
					   				  <div>
										  <img :src="formInlineCard.voucherCover" alt="" style="width: 100px;">
					   				  </div>
					   				</el-form-item>
									<el-form-item label="会员卡logo：">
									  <div>
										  <img :src="formInlineCard.logo" alt="" style="width: 100px;">
									  </div>
									</el-form-item>
					   				<el-form-item label="卡片面值：">
										<div>
											{{formInlineCard.balance}}
										</div>
					   				</el-form-item>
					   				<el-form-item label="卡片售价：">
										<div>
											{{formInlineCard.voucherAmt}}
										</div>
					   				</el-form-item>
					   				<el-form-item label="有效日期：">
										<div>
											{{endDaTE}}
										</div>
										<!-- <el-input v-model="endDaTE" readonly></el-input> -->
					   				</el-form-item>
					   				<el-form-item label="库存数量：">
										<div>
											{{formInlineCard.voucherNum}}
										</div>
					   				  <!-- <el-input v-model="formInlineCard.voucherNum" ></el-input> -->
					   				</el-form-item>
					   				<el-form-item label="特权说明：">
										<!-- <div>
											{{formInlineCard.voucherRemark}}
										</div> -->
					   				    <el-input v-model="formInlineCard.voucherRemark" :maxlength="120" readonly type="textarea" :rows="3"></el-input>
					   				</el-form-item>
					   				<el-form-item label="使用须知：">
										<!-- <div>
											{{formInlineCard.voucherUseRule}}
										</div> -->
					   				   <el-input v-model="formInlineCard.voucherUseRule" readonly :maxlength="120"  type="textarea" :rows="3"></el-input>
					   				</el-form-item>
					   </el-form>
					   
					   <el-form  :model="formInlineCard"  class="demo-form-inline" label-width="120px" v-show="activeCardName==2">
					   							<el-form-item label="创建时间：">
													<div>
														{{formInlineCard.creTime}}
													</div>
					   							   <!-- <el-input v-model="formInlineCard.creTime" readonly></el-input> -->
					   							</el-form-item>
					   				<el-form-item label="销量：">
										<div>
											{{formInlineCard.voucherSunNum}}
										</div>
					   				  <!-- <el-input v-model="formInlineCard.voucherSunNum" readonly></el-input> -->
					   				</el-form-item>
					   				<el-form-item label="会员卡状态：">
										<div>
											{{vipCardList[formInlineCard.voucherStat].text}}
										</div>
					   				  <!-- <el-select v-model="formInlineCard.voucherStat" style="width: 192px;" >
					   				       <el-option label="全部" value=""></el-option>
					   				       <el-option :label="item.text" :value="item.value" v-for="item in vipCardList"></el-option>
					   				   </el-select> -->
					   				</el-form-item>
					   				<el-form-item label="补贴比例：">
										<div>
											<span>{{ formInlineCard.rate*100 }}%</span>
										</div>
					   				  <!-- <el-select v-model="formInlineCard.rate" style="width: 192px;margin-right: 30px;">
					   				       <el-option :label="item.text" :value="item.value" v-for="item in proportion"></el-option>
					   				   </el-select> -->
					   				</el-form-item>
					   </el-form>
				   </div>
				  <span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
						<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				  </span>
				</el-dialog>
	
			</div>
			
			<div class="payHistory">
				<!-- 消费记录弹框 -->
				<el-dialog
				  title="消费记录"
				  :visible.sync="payOrderHistoryDialogVisible"
				  :before-close="handleClose"
				  :width="widthCard"
				  center="true">
					<el-table :data="pageInfo5.dtos" v-loading="tableOrderHistoryCard_loading" element-table_loading-text="加载中" stripe
					 style="width: 100%">
						<el-table-column type="index" width="80" label="序号">
						</el-table-column>
					
						<el-table-column prop="creTime" label="时间">
						</el-table-column>
						<el-table-column prop="goodName" label="订单">
						</el-table-column>
						<el-table-column prop="changeValue" label="消费记录(元)">
						</el-table-column>
					</el-table>
					<div class="paginate">
						<el-pagination @current-change="handleCurrentChangePayHistory" :current-page="pageInfo5.pageNum" :page-size="pageInfo5.pageSize"
						 layout="total, prev, pager, next, jumper" :total="pageInfo5.count">
						</el-pagination>
					</div>
				  <span slot="footer" class="dialog-footer">
						<!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
						<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				  </span>
				</el-dialog>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				payOrderHistoryDialogVisible: false,
				tableOrderHistoryCard_loading: false,
				addCardDialogVisible: false,
				editCardDialogVisible: false,
				dialogVisible: false,
				activeCardName: '1',
				addCardWidth: '30%',
				widthCard:'30%',
				proportion: [{
						text: '2%',
						value: 0.02
					}, {
						text: '4%',
						value: 0.04
					}, {
						text: '6%',
						value: 0.06
					},
					{
						text: '8%',
						value: 0.08
					}
				],
				endDaTE: '长期有效',
				tableCard_loading: false,
				loading: false,
				tabPosition: 'cardName',
				formInlineCard: {
					voucherName: '',
					voucherCover: [],
					logo: [],
					balance: '',
					voucherAmt: '',
					voucherNum: '',
					voucherRemark: '',
					voucherUseRule: '',
					voucherStat: '1',
					voucherType: '3',
					rate: '0.08',
					storeId: '',
				},
				endTime: '1',
				formInline: {
					pageNum: 1,
					sort: 'VOUCHER_AMT',
					voucherType: '3',
					desc: 'DESC',
					pageSize: 10,
					storeId: '',
					voucherName: '',
					voucherStat: ''
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 1,
					count: 1,
					lists: [{
						voucherName: '测试',
						voucherCover: 'http://images.hzsuhu.cn/Fp4yRZ5t4V2GI4EKFgE0Rddbpt7S',
						balance: '154',
						voucherAmt: '748',
						voucherNum: '12',
						voucherSunNum: '30',
						voucherStat: '1'
					}]
				},
				pageInfo4: {
				    pageNum: 1,
				    pageSize: 1,
				    count: 1,
				    dtos:[]
				},
				formInline5: {
					pageNum: 1,
					sort: 'VOUCHER_AMT',
					desc: 'DESC',
					pageSize: 10
				},
				pageInfo5: {
					pageNum: 1,
					pageSize: 1,
					count: 1,
					lists:[]
				},
				formInline4: {
				    pageNum:1,
				    sort:'VOUCHER_AMT',
				    desc:'DESC',
				    pageSize:10,
				    storeId:''
				},
				vipCardList: [{
						text: '已下架',
						value: '0'
					},
					{
						text: '出售中',
						value: '1'
					},
					{
						text: '已失效',
						value: '2'
					}
				]
			};
		},
		created() {
			this.formInline.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.formInlineCard.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.formInline4.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.getCardList(this.pageInfo.pageNum);
		},
		methods: {
			changeListCard() {
				if(this.tabPosition == 'cardName') {
					this.getCardList(1)
				}
				if (this.tabPosition == 'cardList') {
					this.fetchData4(1)
				}
			},
			getCardList(page = 1) {
				// console.log(JSON.parse(sessionStorage.getItem('permission')))
				// let userId = JSON.parse(sessionStorage.getItem('permission')).adminCode
				this.tableCard_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.dataApi.ajax('selectStoreCardByPage', this.formInline, res => {
					this.tableCard_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
						// this.dialogVisibleAll = true
					}
				});
			},
			onSubmit(data) {
				if (data == 'find') {
					this.getCardList(1);
				}
				if (data == 'update') {
					this.formInline.voucherStat = ''
					this.formInline.voucherName = ''
					this.getCardList(1);
				}
				
			},
			onFindSubmit(data) {
				if (data == 'find') {
					this.fetchData4(1);
				}
				if (data == 'update') {
					this.formInline4.userPhone = ''
					this.formInline4.userName = ''
					this.fetchData4(1);
				}
			},
			handleCurrentChange(val) {
				this.getCardList(val)
			},
			handleCurrentChangeCard(val) {
				this.fetchData4(val)
			},
			uploading4(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading5(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			addCardEdio() {
				this.formInlineCard = {
					voucherName: '',
					voucherCover: [],
					logo: [],
					balance: '',
					voucherAmt: '',
					voucherNum: '',
					voucherRemark: '',
					voucherUseRule: '',
					voucherStat: '1',
					voucherType: '3',
					rate: '0.08',
					storeId: ''
				}
				// if(this.pageInfo.lists.length > 0){
				// 	this.showMsg('你已创建会员卡，多张会员卡功能暂未开放', 'warning')
				// 	return
				// }
				this.addCardDialogVisible = true
			},
			addCardSubmit() {
				if(this.formInlineCard.voucherCover.length < 1){
					// this.showMsg('请上传封面图', 'warning')
					this.formInlineCard.voucherCover = ''
				} else{
					var arr1 = this.formInlineCard.voucherCover
					var str1 = arr1.join(',');
					this.formInlineCard.voucherCover = str1
				}
				if(this.formInlineCard.logo.length < 1){
					this.formInlineCard.logo = ''
					// this.showMsg('请上传封面图', 'warning')
				} else{
					var arr2 = this.formInlineCard.logo
					var str2 = arr2.join(',');
					this.formInlineCard.logo = str2
				}
				
				this.dataApi.ajax('addPayStoreCard', this.formInlineCard, res => {
					if (res.responseType === 'S') {
						this.addCardDialogVisible = false
						this.formInlineCard = {
							voucherName: '',
							voucherCover: [],
							logo: [],
							balance: '',
							voucherAmt: '',
							voucherNum: '',
							voucherRemark: '',
							voucherUseRule: '',
							voucherStat: '1',
							storeId: '',
							voucherType: '3',
							rate: '0.08'
						}
						this.getCardList(1);
						// this.dialogVisibleAll = true
					} else{
						this.formInlineCard = {
							voucherName: '',
							voucherCover: [],
							logo: [],
							balance: '',
							voucherAmt: '',
							voucherNum: '',
							voucherRemark: '',
							voucherUseRule: '',
							voucherStat: '1',
							voucherType: '3',
							rate: '0.08',
							storeId: ''
						}
						this.addCardDialogVisible = false
					}
				});
			},
			handleDelete3(item,type){
			    var state=''
				let msg = ''
			    state=item.voucherStat==1? 0:1
				if (type == '下架'){
					msg = '下架后商品不再展示给用户，确认下架吗'
				} else{
					msg = '商品上架库存需要大于0，请保证库存充足'
				}
			    this.$confirm(''+msg+'?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.dataApi.ajax('editPayStoreCard',{voucherStat:state,voucherId:item.voucherId}, res => {
			                if (res.responseType === 'S') {
			                    this.$message({
			                        type: 'success',
			                        message: type+'成功!'
			                    });
			                    this.getCardList(1);
			                }
			            });
			        }).catch(() => {
			                  
			        });
			},
			handleDelete4(item,type){
			    var state=''
			    state= 2
			    this.$confirm('此操作不可逆，是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.dataApi.ajax('editPayStoreCard',{voucherStat:state,voucherId:item.voucherId}, res => {
			                if (res.responseType === 'S') {
			                    this.$message({
			                        type: 'success',
			                        message: type+'成功!'
			                    });
			                    this.getCardList(1);
			                }
			            });
			        }).catch(() => {
			                  
			        });
			},
			// 查看
			showFindCardDiog (data) {
				this.dialogVisible = true
				this.formInlineCard = {
					voucherName: '',
					voucherCover: [],
					logo: [],
					balance: '',
					voucherAmt: '',
					voucherNum: '',
					voucherRemark: '',
					voucherUseRule: '',
					voucherStat: '1',
					voucherType: '3',
					storeId: '',
					rate: '0.08'
				}
				this.activeCardName = '1'
				this.formInlineCard = data
			},
			handleClose() {
			    this.dialogVisible = false
				this.editCardDialogVisible = false
				this.payOrderHistoryDialogVisible = false
			},
			handleClickCard() {
				// console.log(1)
			},
			// 编辑
			showEditCardDiog(data) {
				this.formInlineCard = {
					voucherName: '',
					voucherCover: [],
					logo: [],
					balance: '',
					voucherAmt: '',
					voucherNum: '',
					voucherRemark: '',
					voucherUseRule: '',
					voucherStat: '1',
					storeId: '',
					voucherType: '3',
					rate: '0.08'
				}
				this.formInlineCard = data
				this.editCardDialogVisible = true
			},
			// 编辑提交
			editCardPrice() {
				this.dataApi.ajax('editPayStoreCard',{voucherNum:this.formInlineCard.voucherNum,voucherId:this.formInlineCard.voucherId,voucherAmt:this.formInlineCard.voucherAmt}, res => {
				      if (res.responseType === 'S') {
				          this.$message({
				              type: 'success',
				              message: '编辑成功!'
				          });
						  this.editCardDialogVisible = false
				          this.getCardList(1);
				      }
				  });
			},
			// 会员卡名单
			fetchData4 (page = 1) {
			    this.tableCard_loading = true;
			    this.pageInfo4.pageNum = page
			    this.formInline4.pageNum = this.pageInfo4.pageNum
			    this.dataApi.ajax('storeCardUserList',this.formInline4, res => {
			        this.tableCard_loading = false;
					// console.log(res)
			        if (res.responseType === 'S'){
			            this.pageInfo4 = res
						// console.log(this.pageInfo4,'会员卡名单')
			        }
			    });
			
			},
			// 会员卡名单消费记录
			showPayOrderHistory(data) {
				this.payOrderHistoryDialogVisible = true
				this.formInline5.userId = data.userId
				this.getPayHistoryList(1)
			},
			getPayHistoryList(page = 1) {
				this.tableOrderHistoryCard_loading = true;
				this.pageInfo5.pageNum = page
				this.formInline5.pageNum = this.pageInfo5.pageNum
				this.dataApi.ajax('payStoreCardByPage',this.formInline5, res => {
				    this.tableOrderHistoryCard_loading = false;
				    if (res.responseType === 'S'){
				        this.pageInfo5 = res
						// console.log(this.pageInfo4,'消费记录')
				    }
				});
			},
			handleCurrentChangePayHistory(val) {
				this.getPayHistoryList(val)
			}
		}
	}
</script>

<style>
	.vipAddCard .el-dialog__header {
		text-align: center;
		background-color: #f4f5f6;
		padding: 20px;
	}

	.vipAddCard .el-dialog--small {
		width: 30%;
	}
	.payHistory .el-dialog--small {
		width: 50%;
	}
	.payHistory .el-dialog__header {
		text-align: center;
		background-color: #f4f5f6;
		padding: 20px;
	}
	 
	.vipAddCard .el-form-item {
		margin-bottom: 10px;
	}
	.weui-uploader__files img{
		width: 100px!important;
		height: auto!important;
	}
	.vipAddCard .el-dialog__body{
		padding: 0;
	}
</style>
